<template>
  <div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">
          <svg-icon icon-class="yjbb" class="myIcon" />榆树林油田日用电量情况表
        </div>
        <div class="myButtons">
          <el-button @click="handleClick('', 'add')">新增</el-button>
          <el-button @click="uploadData">批量导入</el-button>
        </div>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick">
        <el-tab-pane label="变电所及各作业区电量" name="first"
          >变电所及各作业区电量</el-tab-pane
        >
        <el-tab-pane
          label="变电所各出线电量"
          name="second"
          @tab-click="handleMenuClick"
          >变电所各出线电量</el-tab-pane
        >
      </el-tabs>

      <!--总览界面-->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        v-show="zonglanVisable"
      >
        <el-table-column align="center" prop="id" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="shijian" label="日期">
        </el-table-column>
        <el-table-column align="center" prop="zydl" label="总用电量">
        </el-table-column>
        <el-table-column align="center" label="各变电所用电量情况">
          <el-table-column align="center" label="榆一变">
            <el-table-column align="center" prop="yybygdl" label="有功电量">
            </el-table-column>
            <el-table-column align="center" prop="yybwgdl" label="无功电量">
            </el-table-column>
            <el-table-column align="center" prop="yybglys" label="功率因数">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="东16变">
            <el-table-column align="center" prop="d16bygdl" label="有功电量">
            </el-table-column>
            <el-table-column align="center" prop="d16bwgdl" label="无功电量">
            </el-table-column>
            <el-table-column align="center" prop="d16bglys" label="功率因数">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="升20变">
            <el-table-column align="center" prop="s20bygdl" label="有功电量">
            </el-table-column>
            <el-table-column align="center" prop="s20bwgdl" label="无功电量">
            </el-table-column>
            <el-table-column align="center" prop="s20bglys" label="功率因数">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="树127变">
            <el-table-column align="center" prop="s127bygdl" label="有功电量">
            </el-table-column>
            <el-table-column align="center" prop="s127bwgdl" label="无功电量">
            </el-table-column>
            <el-table-column align="center" prop="s127bglys" label="功率因数">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="升22变">
            <el-table-column align="center" prop="s22bygdl" label="有功电量">
            </el-table-column>
            <el-table-column align="center" prop="s22bwgdl" label="无功电量">
            </el-table-column>
            <el-table-column align="center" prop="s22bglys" label="功率因数">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="榆一次变">
            <el-table-column align="center" prop="yycbygdl" label="有功电量">
            </el-table-column>
            <el-table-column align="center" prop="yycbwgdl" label="无功电量">
            </el-table-column>
            <el-table-column align="center" prop="yycbglys" label="功率因数">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="各单位日用电量情况">
          <el-table-column align="center" prop="dyydl" label="第一作业区">
          </el-table-column>
          <el-table-column align="center" prop="deydl" label="第二作业区">
          </el-table-column>
          <el-table-column align="center" prop="dsydl" label="第三作业区">
          </el-table-column>
          <el-table-column align="center" prop="dfydl" label="第四作业区">
          </el-table-column>
          <el-table-column align="center" label="肇州分公司">
            <el-table-column align="center" prop="zzfgs25" label="肇25区块">
            </el-table-column>
            <el-table-column align="center" prop="zzfgs22" label="升22区块">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="cq" label="厂区">
          </el-table-column>
        </el-table-column>

        <el-table-column
          align="center"
          fixed="right"
          prop="approveStatus"
          label="审核状态"
        >
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.approveBz"
              placement="bottom"
              effect="light"
              :disabled="!scope.row.approveBz"
            >
              <el-badge
                :is-dot="scope.row.approveBz || scope.row.approveBz === ' '"
                class="item"
              >
                <el-tag
                  :class="scope.row.approveBz ? 'tagstyle' : ''"
                  :type="
                    scope.row.approveStatus == '2'
                      ? 'success'
                      : scope.row.approveStatus == '1'
                      ? 'warning'
                      : scope.row.approveStatus == '0'
                      ? 'info'
                      : 'danger'
                  "
                  disable-transitions
                  >{{
                    scope.row.approveStatus == "2"
                      ? "已通过"
                      : scope.row.approveStatus == "1"
                      ? "未审核"
                      : scope.row.approveStatus == "0"
                      ? "未提交"
                      : "未通过"
                  }}</el-tag
                >
              </el-badge>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text"
              >查看</el-button
            >
            <el-button @click="handleClick(scope.row, 'edit')" type="text"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--容器区界面-->
      <el-table
        :data="rongqiquData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        v-show="rongqiquVisable"
      >
        <el-table-column align="center" prop="id" label="序号">
        </el-table-column>
        <el-table-column
          type="index"
          align="center"
          prop="shijian"
          label="日期"
        >
        </el-table-column>
        <el-table-column prop="axd" align="center" label="榆一变">
          <el-table-column align="center" prop="yyb81111" label="81111">
          </el-table-column>
          <el-table-column align="center" prop="yyb81112" label="81112">
          </el-table-column>
          <el-table-column align="center" prop="yyb81113" label="81113">
          </el-table-column>
          <el-table-column align="center" prop="yyb81114" label="81114">
          </el-table-column>
          <el-table-column align="center" prop="yyb81115" label="81115">
          </el-table-column>
          <el-table-column align="center" prop="yyb81116" label="81116">
          </el-table-column>
          <el-table-column align="center" prop="yyb81117" label="81117">
          </el-table-column>
          <el-table-column align="center" prop="yyb81118" label="81118">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="axd" align="center" label="东16变">
          <el-table-column align="center" prop="d16b81611" label="81611">
          </el-table-column>
          <el-table-column align="center" prop="d16b81612" label="81612">
          </el-table-column>
          <el-table-column align="center" prop="d16b81613" label="81613">
          </el-table-column>
          <el-table-column align="center" prop="d16b81614" label="81614">
          </el-table-column>
          <el-table-column align="center" prop="d16b81615" label="81615">
          </el-table-column>
          <el-table-column align="center" prop="d16b81616" label="81616">
          </el-table-column>
          <el-table-column align="center" prop="d16b81617" label="81617">
          </el-table-column>
          <el-table-column align="center" prop="d16b81618" label="81618">
          </el-table-column>
          <el-table-column align="center" prop="d16b81619" label="81619">
          </el-table-column>
          <el-table-column align="center" prop="abzd16b81620" label="81620">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="axd" align="center" label="树127变">
          <el-table-column align="center" prop="s127b81711" label="81711">
          </el-table-column>
          <el-table-column align="center" prop="s127b81712" label="81712">
          </el-table-column>
          <el-table-column align="center" prop="s127b81713" label="81713">
          </el-table-column>
          <el-table-column align="center" prop="s127b81714" label="81714">
          </el-table-column>
          <el-table-column align="center" prop="s127b81715" label="81715">
          </el-table-column>
          <el-table-column align="center" prop="s127b81716" label="81716">
          </el-table-column>
          <el-table-column align="center" prop="s127b81717" label="81717">
          </el-table-column>
          <el-table-column align="center" prop="s127b81718" label="81718">
          </el-table-column>
          <el-table-column align="center" prop="s127b81719" label="81719">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="axd" align="center" label="升20变">
          <el-table-column align="center" prop="s20b82008" label="82008">
          </el-table-column>
          <el-table-column align="center" prop="s20b82011" label="82011">
          </el-table-column>
          <el-table-column align="center" prop="s20b82012" label="82012">
          </el-table-column>
          <el-table-column align="center" prop="s20b82013" label="82013">
          </el-table-column>
          <el-table-column align="center" prop="s20b82017" label="82017">
          </el-table-column>
          <el-table-column align="center" prop="s20b82018" label="82018">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="axd" align="center" label="升22变">
          <el-table-column align="center" prop="s22b82011" label="80211">
          </el-table-column>
          <el-table-column align="center" prop="s22b82013" label="80213">
          </el-table-column>
          <el-table-column align="center" prop="s22b82015" label="80215">
          </el-table-column>
          <el-table-column align="center" prop="s22b82017" label="80217">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="axd" align="center" label="榆一次变">
          <el-table-column align="center" prop="yycb868" label="868">
          </el-table-column>
          <el-table-column align="center" prop="yycb869" label="869">
          </el-table-column>
          <el-table-column align="center" prop="yycb870" label="870">
          </el-table-column>
          <el-table-column align="center" prop="yycb873" label="873">
          </el-table-column>
          <el-table-column align="center" prop="yycb875" label="875">
          </el-table-column>
          <el-table-column align="center" prop="yycb876" label="876">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="axd" align="center" label="肇五变">
          <el-table-column align="center" prop="zwb80519" label="80519">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="axd" align="center" label="树16区">
          <el-table-column align="center" prop="s16q65p" label="65排">
          </el-table-column>
          <el-table-column align="center" prop="s16q67p" label="67排">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="cqcxbl" label="厂区">
        </el-table-column>
        <el-table-column align="center" prop="cxdlbz" label="备注">
        </el-table-column>
        <el-table-column align="center" prop="oneqcxdl" label="一区">
        </el-table-column>
        <el-table-column align="center" prop="fourqcxdl" label="四区">
        </el-table-column>
        <el-table-column align="center" prop="z1cxdl" label="肇一">
        </el-table-column>
        <el-table-column align="center" prop="threeqcxdl" label="三区">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          prop="approveStatus"
          label="审核状态"
        >
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.approveBz"
              placement="bottom"
              effect="light"
              :disabled="!scope.row.approveBz"
            >
              <el-badge
                :is-dot="scope.row.approveBz || scope.row.approveBz === ' '"
                class="item"
              >
                <el-tag
                  :class="scope.row.approveBz ? 'tagstyle' : ''"
                  :type="
                    scope.row.approveStatus == '2'
                      ? 'success'
                      : scope.row.approveStatus == '1'
                      ? 'warning'
                      : scope.row.approveStatus == '0'
                      ? 'info'
                      : 'danger'
                  "
                  disable-transitions
                  >{{
                    scope.row.approveStatus == "2"
                      ? "已通过"
                      : scope.row.approveStatus == "1"
                      ? "未审核"
                      : scope.row.approveStatus == "0"
                      ? "未提交"
                      : "未通过"
                  }}</el-tag
                >
              </el-badge>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text"
              >查看</el-button
            >
            <el-button @click="handleClick(scope.row, 'edit')" type="text"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>

    <!-- 总览弹出框 -->
    <el-dialog :title="myDialogTitle" :visible.sync="zonglanFormVisible">
      <el-form
        :inline="true"
        :model="zonglanForm"
        class="demo-form-inline"
        :disabled="isInput"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="zonglanForm.shijian"
                placeholder="请输入日期"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总用电量:">
              <el-input
                v-model="zonglanForm.yybygdl"
                placeholder="请输入总用电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">榆一变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有功电量:">
              <el-input
                v-model="zonglanForm.yybygdl"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无功电量:">
              <el-input
                v-model="zonglanForm.yybwgdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功率因数:">
              <el-input
                v-model="zonglanForm.yybglys"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">东16变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有功电量:">
              <el-input
                v-model="zonglanForm.d16bygdl"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无功电量:">
              <el-input
                v-model="zonglanForm.d16bwgdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功率因数:">
              <el-input
                v-model="zonglanForm.d16bglys"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">升20变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有功电量:">
              <el-input
                v-model="zonglanForm.s20bygdl"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无功电量:">
              <el-input
                v-model="zonglanForm.s20bwgdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功率因数:">
              <el-input
                v-model="zonglanForm.s20bglys"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">树127变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有功电量:">
              <el-input
                v-model="zonglanForm.s127bygdl"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无功电量:">
              <el-input
                v-model="zonglanForm.s127bwgdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功率因数:">
              <el-input
                v-model="zonglanForm.s127bglys"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">升22变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有功电量:">
              <el-input
                v-model="zonglanForm.s22bygdl"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无功电量:">
              <el-input
                v-model="zonglanForm.s22bwgdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功率因数:">
              <el-input
                v-model="zonglanForm.s22bglys"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">榆一次变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有功电量:">
              <el-input
                v-model="zonglanForm.yycbygdl"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无功电量:">
              <el-input
                v-model="zonglanForm.yycbwgdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功率因数:">
              <el-input
                v-model="zonglanForm.yycbglys"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">各单位日用电量相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="第一作业区:">
              <el-input
                v-model="zonglanForm.dyydl"
                placeholder="请输入日用电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="第二作业区:">
              <el-input
                v-model="zonglanForm.deydl"
                placeholder="请输入日用电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="第三作业区:">
              <el-input
                v-model="zonglanForm.dsydl"
                placeholder="请输入日用电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="第四作业区:">
              <el-input
                v-model="zonglanForm.dfydl"
                placeholder="请输入日用电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="肇州分公司25区块:">
              <el-input
                v-model="zonglanForm.zzfgs25"
                placeholder="请输入日用电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肇州分公司22区块:">
              <el-input
                v-model="zonglanForm.zzfgs22"
                placeholder="请输入日用电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="厂区:">
              <el-input
                v-model="zonglanForm.cq"
                placeholder="请输入日用电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="zonglanFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="zonglanFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 容器区弹出框 -->
    <el-dialog :title="myDialogTitle" :visible.sync="rongqiquFormVisible">
      <el-form
        :inline="true"
        :model="rongqiquForm"
        class="demo-form-inline"
        :disabled="isInput"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="zonglanForm.shijian"
                placeholder="请输入日期"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">榆一变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="81111:">
              <el-input
                v-model="rongqiquForm.yyb81111"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81112:">
              <el-input
                v-model="rongqiquForm.yyb81112"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81113:">
              <el-input
                v-model="rongqiquForm.yyb81113"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81114:">
              <el-input
                v-model="rongqiquForm.yyb81114"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="81115:">
              <el-input
                v-model="rongqiquForm.yyb81115"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81116:">
              <el-input
                v-model="rongqiquForm.yyb81116"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81117:">
              <el-input
                v-model="rongqiquForm.yyb81117"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81118:">
              <el-input
                v-model="rongqiquForm.yyb81118"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">东16变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="81611:">
              <el-input
                v-model="rongqiquForm.d16b81611"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81612:">
              <el-input
                v-model="rongqiquForm.d16b81612"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81613:">
              <el-input
                v-model="rongqiquForm.d16b81613"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81614:">
              <el-input
                v-model="rongqiquForm.d16b81614"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="81615:">
              <el-input
                v-model="rongqiquForm.d16b81615"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81616:">
              <el-input
                v-model="rongqiquForm.d16b81616"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81617:">
              <el-input
                v-model="rongqiquForm.d16b81617"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81618:">
              <el-input
                v-model="rongqiquForm.d16b81618"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="81619:">
              <el-input
                v-model="rongqiquForm.d16b81619"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81620:">
              <el-input
                v-model="rongqiquForm.d16b81620"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">树127变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="81711:">
              <el-input
                v-model="rongqiquForm.s127b81711"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81712:">
              <el-input
                v-model="rongqiquForm.s127b81712"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81713:">
              <el-input
                v-model="rongqiquForm.s127b81713"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81714:">
              <el-input
                v-model="rongqiquForm.s127b81714"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="81715:">
              <el-input
                v-model="rongqiquForm.s127b81715"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81716:">
              <el-input
                v-model="rongqiquForm.s127b81716"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81717:">
              <el-input
                v-model="rongqiquForm.s127b81717"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="81619:">
              <el-input
                v-model="rongqiquForm.s127b81719"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">升20变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="82008:">
              <el-input
                v-model="rongqiquForm.s20b82008"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="82011:">
              <el-input
                v-model="rongqiquForm.s20b82011"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="82012:">
              <el-input
                v-model="rongqiquForm.s20b82012"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="82013:">
              <el-input
                v-model="rongqiquForm.s20b82013"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="82017:">
              <el-input
                v-model="rongqiquForm.s20b82017"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="82018:">
              <el-input
                v-model="rongqiquForm.s20b82018"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">升22变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="80211:">
              <el-input
                v-model="rongqiquForm.s22b80211"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="80213:">
              <el-input
                v-model="rongqiquForm.s22b80213"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="80215:">
              <el-input
                v-model="rongqiquForm.s22b80215"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="80217:">
              <el-input
                v-model="rongqiquForm.s22b80217"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">榆一次变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="868:">
              <el-input
                v-model="rongqiquForm.yycb868"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="869:">
              <el-input
                v-model="rongqiquForm.yycb869"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="870:">
              <el-input
                v-model="rongqiquForm.yycb870"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="873:">
              <el-input
                v-model="rongqiquForm.yycb873"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="875:">
              <el-input
                v-model="rongqiquForm.yycb875"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="876:">
              <el-input
                v-model="rongqiquForm.yycb876"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">肇五变相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="80519:">
              <el-input
                v-model="rongqiquForm.zwb80519"
                placeholder="请输入有功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">树16区相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="65排:">
              <el-input
                v-model="rongqiquForm.s16q65p"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="67排:">
              <el-input
                v-model="rongqiquForm.s16q67p"
                placeholder="请输入功率因数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">厂区相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="厂区出线电量:">
              <el-input
                v-model="rongqiquForm.cqcxbl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="一区出线电量:">
              <el-input
                v-model="rongqiquForm.oneqcxdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="三区出线电量:">
              <el-input
                v-model="rongqiquForm.threeqcxdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="四区出线电量:">
              <el-input
                v-model="rongqiquForm.fourqcxdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肇一出线电量:">
              <el-input
                v-model="rongqiquForm.z1cxdl"
                placeholder="请输入无功电量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="rongqiquFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="rongqiquFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import yslytrydlqkbApi from "@/api/yslytrydlqkb";
import axios from "axios";

import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      currentPageName: "总览",

      activeName: "first",

      //容器区数据
      rongqiquData: [
        {
          //父表号
          axh: 1,
          //容器区数据
          //1#四合一液位油室数据
          axd: "尚9",
          ajh: "尚102-92",
          asgrq: "2022.6.23",
          arpz: "20",
          acslx: "重配",
          amqjd: "施工等待",
          abz: "恒达作业队",
        },
      ],

      //加热炉区数据
      jiareluquData: [
        {
          bxh: 1,

          bxd: "树322",
          bjh: "树72-63",
          bcfarq: "2022.2.20",
          bcsyy: "测试遇阻",

          bbz: "重配",
        },
      ],

      //机泵区数据
      jibengquData: [
        {
          //父表号
          cxh: 1,
          //容器区数据
          //1#四合一液位油室数据
          cxd: "树322",
          cjh: "树68-斜67",
          ccsyy: "待措施",
          cbz: "磨封失败",
        },
      ],

      // table数据
      tableData: [
        {
          //总览数据
          dw: "一区",
          zjs: "1",
          zrpz: "20",
          qjs: "1",
          qrpz: "10",
          yjs: "5",
          yrpz: "73",
          //表号，唯一标识
          wjs: "2",
          wrpz: "45",
        },
      ],

      //table数据总条数
      tableTotal: 30,
      //当前页码
      currentPage: 1,
      // 分页数
      pageSize: 5,

      //总览表单填报的数据
      zonglanForm: {
        shijian: "",
        zydl: "",
        yybygdl: "",
        yybwgdl: "",
        yybglys: "",
        d16bygdl: "",
        d16bwgdl: "",
        d16bglys: "",
        s20bygdl: "",
        s20bwgdl: "",
        s20bglys: "",
        s127bygdl: "",
        s127bwgdl: "",
        s127bglys: "",
        s22bygdl: "",
        s22bwgdl: "",
        s22bglys: "",
        yycbygdl: "",
        yycbwgdl: "",
        yycbglys: "",
        dyydl: "",
        deydl: "",
        dsydl: "",
        dfydl: "",
        zzfgs25: "",
        zzfgs22: "",
        cq: "",
        //表号，唯一标识
        id: 0,
      },
      //容器区表单填报数据
      rongqiquForm: {
        shijian: "",
        yyb81111: "",
        yyb81112: "",
        yyb81113: "",
        yyb81114: "",
        yyb81115: "",
        yyb81116: "",
        yyb81117: "",
        yyb81118: "",
        d16b81611: "",
        d16b81612: "",
        d16b81613: "",
        d16b81614: "",
        d16b81615: "",
        d16b81616: "",
        d16b81617: "",
        d16b81618: "",
        d16b81619: "",
        d16b81620: "",
        s127b81711: "",
        s127b81712: "",
        s127b81713: "",
        s127b81714: "",
        s127b81715: "",
        s127b81716: "",
        s127b81717: "",
        s127b81718: "",
        s127b81719: "",
        s20b82008: "",
        s20b82011: "",
        s20b82012: "",
        s20b82013: "",
        s20b82017: "",
        s20b82018: "",
        s22b80211: "",
        s22b80213: "",
        s22b80215: "",
        s22b80217: "",
        yycb868: "",
        yycb869: "",
        yycb870: "",
        yycb873: "",
        yycb875: "",
        yycb876: "",
        zwb80519: "",
        s16q65p: "",
        s16q67p: "",
        cqcxbl: "",
        cxdlbz: "",
        oneqcxdl: "",
        twoqcxdl: "",
        threeqcxdl: "",
        fourqcxdl: "",
        z1cxdl: "",
      },

      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      //总览编辑框是否显示
      zonglanFormVisible: false,

      //容器区编辑框是否显示
      rongqiquFormVisible: false,

      isInput: false,
      ischeckSh: false,
      ischeck: false,
      //控制查看时不可更改数据
      myDialogTitle: "",

      //总览的可见性
      zonglanVisable: true,

      //容器区的可见性
      rongqiquVisable: false,
      //弹出框标题
      myDialogTitle: "",
      file: null,
      //加载动画
      uploadLoading: false,
      //上传的文件列表
      fileList: [],
      //控制弹出框显示与否
      uploadShowDialog: false,
      //上传地址
      uploadURL: "",
      //loading加载中
      downloadLoading: "",
      importDialog: false,
      fileList: [],
      urlFile: "",
      uploading: true,
    };
  },
  methods: {
    async search() {
      if (this.currentPageName === "变电所及各作业区电量") {
        //发送查询请求
        let res = await yslytrydlqkbApi.getYslytrydlqkbList(
          this.pageNo,
          this.pageSize
        );
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.tableData = res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      } else if (this.currentPageName === "变电所各出线电量") {
        //发送查询请求
        let res = await yslytrydlqkbApi.getYslytrydlqkbList(
          this.pageNo,
          this.pageSize
        );
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.rongqiquData = res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }
    },
    onSubmit() {
      console.log("submit!");
    },
    handleClick(row, handle) {
      if (this.currentPageName === "变电所及各作业区电量") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.zonglanFormVisible = true;
        this.zonglanForm = row;
        if (handle === "check") {
          this.myDialogTitle = "变电所及各作业区电量信息查看";
          this.ischeck = true;
          this.isInput = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "变电所及各作业区电量信息编辑";
          this.ischeck = false;
          this.isInput = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "变电所及各作业区电量信息填报";
          this.ischeck = false;
          this.isInput = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        //同时其他的Form设置为false
        this.rongqiquFormVisible = false;
      } else if (this.currentPageName === "变电所各出线电量") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.rongqiquFormVisible = true;
        if (handle === "check") {
          this.rongqiquForm = row;
          this.myDialogTitle = "变电所各出线电量信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.rongqiquForm = row;
          this.myDialogTitle = "变电所各出线电量信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("rongqiquForm", this.rongqiquForm); //清空表单数据
          this.myDialogTitle = "变电所各出线电量信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
      }
    },

    uploadData() {
      console.log("批量导入成功");
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },

    //Tab标签区域切换按钮事件
    handleMenuClick(tab, event) {
      var content = event.target.innerText;
      if (content === "变电所及各作业区电量") {
        this.currentPageName = "变电所及各作业区电量";
        this.search();
        this.zonglanVisable = true;
        this.rongqiquVisable = false;
      } else if (content === "变电所各出线电量") {
        this.currentPageName = "变电所各出线电量";
        this.search();
        this.zonglanVisable = false;
        this.rongqiquVisable = true;
      }
      console.log(this.currentPageName);
    },

    close() {
      //总览编辑框是否显示
      this.zonglanFormVisible = false;
      //容器区编辑框是否显示
      this.rongqiquFormVisible = false;
      //加热炉区编辑框是否显示

      this.search();
    },
    async submitForm() {
      let res = null;
      if (this.currentPageName === "变电所及各作业区电量") {
        if (this.zonglanForm.id === "") {
          //发送添加请求
          res = await yslytrydlqkbApi.addYslytrydlqkb(this.zonglanForm);
          this.$message({ message: "添加成功", type: "success" });
        } else {
          res = await yslytrydlqkbApi.updateYslytrydlqkb(this.zonglanForm);
          this.$message({ message: "编辑成功", type: "success" });
        }
        this.search();
        this.close();
      } else if (this.currentPageName === "变电所各出线电量") {
        if (this.rongqiquForm.id === "") {
          //发送添加请求
          res = await yslytrydlqkbApi.addYslytrydlqkb(this.rongqiquForm);
          this.$message({ message: "添加成功", type: "success" });
        } else {
          res = await yslytrydlqkbApi.updateYslytrydlqkb(this.rongqiquForm);
          this.$message({ message: "编辑成功", type: "success" });
        }
        this.search();
        this.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
